<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-card v-if="visible" :loading="loading" title="Basic Information">
      
        <a-row>
          <a-col :span="4">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol">
              <a-upload
                v-model:file-list="fileList"
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
              <div class="upload-title" style="text-align: center;margin-right: 9px">只支持jpg格式</div>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="title" :label="t('professor-manage.label.name')" name="title">
              <a-input v-model="formState.name" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="idnumber" :label="t('professor-manage.label.idnumber')" name="idnumber">
              <a-input v-model="formState.idnumber" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="surname" :label="t('professor-manage.label.surname')" name="surname">
              <a-input v-model="formState.surname" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="firstname" :label="t('professor-manage.label.firstname')" name="firstname">
              <a-input v-model="formState.firstname" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="middle" :label="t('professor-manage.label.middleinitial')" name="middle">
              <a-input v-model="formState.middle" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="applicationTime" :label="t('professor-manage.label.applicationTime')" name="applicationTime">
              <a-date-picker
                v-model="formState.applicationTime"
                show-time
                type="date"
                placeholder="年月日"
              />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="status" :label="t('professor-manage.label.status')" name="status">
              <a-input v-model="formState.status" placeholder="请输入" />
            </a-form-item>
          </a-col >

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="hiredate" :label="t('professor-manage.label.hiredate')" name="hiredate">
              <a-date-picker
                v-model="formState.hiredate"
                show-time
                type="date"
                placeholder="年月日"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="10">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="facultyGroup" :label="t('professor-manage.label.facultyGroup')" name="facultyGroup">
              <a-textarea
                v-model="formState.facultyGroup"
                placeholder="请输入"
                :auto-size="{ minRows: 3, maxRows: 12 }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="email" :label="t('professor-manage.label.email')" name="email">
              <a-input v-model="formState.email" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="altemail" :label="t('professor-manage.label.altemail')" name="altemail">
              <a-input v-model="formState.altemail" placeholder="请输入" />
            </a-form-item>
          </a-col>

          
          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="street" :label="t('professor-manage.label.street')" name="street">
              <a-input v-model="formState.street" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="address2" :label="t('professor-manage.label.addressline2')" name="address2">
              <a-input v-model="formState.address2" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="city" :label="t('professor-manage.label.city')" name="city">
              <a-input v-model="formState.city" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="province" :label="t('professor-manage.label.province')" name="province">
              <a-input v-model="formState.province"  placeholder="请输入"/>
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="postalcode" :label="t('professor-manage.label.postalcode')" name="postalcode">
              <a-input v-model="formState.postalcode" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="country" :label="t('professor-manage.label.country')" name="country">
              <a-input v-model="formState.country" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="citizenship" :label="t('professor-manage.label.citizenship')" name="citizenship">
              <a-input v-model="formState.citizenship" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="phone" :label="t('professor-manage.label.phone')" name="phone">
              <a-input v-model="formState.phone" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="school" :label="t('professor-manage.label.school')" name="school">
              <a-select v-model:value="formState.school" placeholder="please select your zone">
                <a-select-option value="school1">school1</a-select-option>
                <a-select-option value="school2">school2</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="bank" :label="t('professor-manage.label.bank')" name="bank">
              <a-input v-model="formState.bank" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="account" :label="t('professor-manage.label.account')" name="account">
              <a-input v-model="formState.account" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item :labelCol="formState.labelCol" :wrapperCol="formState.wrapperCol" ref="intro" :label="t('professor-manage.label.intro')" name="intro">
              <a-textarea
                v-model="formState.intro"
                placeholder="请输入"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </a-form-item>
          </a-col>

        </a-row>
    </a-card>

    <a-card v-if="visible" :loading="loading" title="Working Experience">
    </a-card>

    <!-- TODO 可以添加多列 -->
    <a-card v-if="visible" :loading="loading" title="Eduction Background">
    </a-card>

    <a-card v-if="visible" :loading="loading" title="others">
    </a-card>

    <a-card v-if="visible" :loading="loading" title="附件信息">
    </a-card>
  </a-form>
</template>

<script>
import { message } from 'ant-design-vue';
import {defineComponent, reactive, toRaw, ref} from 'vue';
import { useI18n } from 'vue-i18n'

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  name: "append",
  props: {
    visible: {
      type: Boolean,
    },
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form);
    },
    
  },
  setup(props, content) {
    const {t} = useI18n()
    const cancel = () => {
      content.emit('close')
    }

    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref('');

    const handleChange = info => {
      if (info.file.status === 'uploading') {
        loading.value = true;
        return;
      }

      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, base64Url => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
      }

      if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
      }
    }

    const beforeUpload = file => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

      if (!isJpgOrPng) {
        message.error('You can only upload JPG file!');
      }

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
      }

      return isJpgOrPng && isLt2M;
    }

    return {
      t,
      cancel,
      
      loading: false,
      imageUrl: '',
      handleChange,
      beforeUpload,

      labelCol: { span: 12},
      wrapperCol: { span: 42 },
      formState: {
        labelCol : { span: 24, offset:0},
        wrapperCol : { span: 12, offset:0},
        name: '',
        idnumber: 1,
        surname: '',
        firstname: '',
        middle:'',
        applicationTime:'',
        status:'',
        hiredate:'',
        facultyGroup:'',
        email:'',
        street:'',
        altemail:'',
        address2:'',
        city:'',
        province:'',
        postalcode:'',
        country:'',
        citizenship:'',
        phone:'',
        school:'',
        bank:'',
        account:'',
        intro:''
      },
    }
  }
}
</script>

<style>

</style>
